<template>
  <tableHeadFilter
    v-if="showOrHiddenHead"
    @set-prop-list="getPropList"
    @refresh-handle="refreshHandle"
    @handle-serial-column="handleSerialColumnChanges"
    @handle-tick="handleTickChanges"
    @handle-size-table="handleSizeTableChange"
    @handle-vertical-border="handleVerticalBorderChanges"
    @handle-sortable-custom="handleSortableCustomChanges"
    :propList="propList"
  />
  <el-table
    ref="tableRef"
    :border="verticalBorders"
    :size="tableSizes"
    v-loading="loading"
    :data="tableData"
    v-bind="$attrs"
  >
    <!-- 1.传入showSelectColumn时展示的全选列 -->
    <template v-if="showSelectColumn && tickColumn">
      <el-table-column type="selection" min-width="50" :selectable="selectable" />
    </template>
    <!-- 2.传入showIndexColumn时展示的序号列 -->
    <template v-if="showIndexColumn && serialColumn">
      <el-table-column type="index" label="序号" align="left" min-width="60" />
    </template>
    <!-- 3.propList里面的所有列 -->
    <template v-for="(item, index) in propListDate" :key="item?.prop + `${index}`">
      <el-table-column
        :sortable="sortableCustom"
        v-if="!item?.showTable"
        v-bind="item"
        :show-overflow-tooltip="showOverflowTooltip"
      >
        <!-- 传有slotName时展示的插槽列 -->
        <template #default="scope" v-if="item.filter">
          {{ item.filter(scope.row[`${item.prop}`]) }}
        </template>
        <template #default="scope" v-else-if="item.slotName">
          <slot :name="item.slotName" :row="scope.row"></slot>
        </template>
      </el-table-column>
    </template>
  </el-table>
  <Pagination
    v-if="showPagination"
    v-model:page="pagination.page"
    v-model:limit="pagination.limit"
    :total="total"
    @pagination="getTableData"
  />
</template>
<script setup lang="ts">
import { watch } from "vue";
import tableHeadFilter from "@/components/tableHeadFilter/index.vue";
import { ColumnOption, SizeTable } from "./tableType";
import { useTable } from "@/hooks/useTable";

interface Props {
  requestApi: Function; // 请求表格数据的 api的axios方法 ==> 必传
  queryForm?: any;
  propList: ColumnOption[]; //表格行el-table-column配置项
  showIndexColumn?: boolean; //是否显示索引列
  showSelectColumn?: boolean; //是否显示全选列
  showPagination?: boolean; //是否显示分页
  childrenProps?: object; // 是否有子数据，树形数据才用得到
  dataRoot?: string; // 后台返回的数据获取时，list的字段不一致
  showOverflowTooltip?: boolean; // 是否隐藏额外内容
  selectableFilter?: number[]; // 用来决定这一行的 CheckBox 是否可以勾选
  selectableId?: string; // 匹配这一行CheckBox 勾选的ID字段
  showOrHiddenHead?: boolean; // 是否隐藏头部筛选
  isPagination?: boolean; // 后台返回的数据是否存在分页
}
// 表格行el-table-column配置项
const propListDate = ref<ColumnOption[]>([]);
onMounted(() => {
  propListDate.value = propList;
});
const {
  showIndexColumn = false,
  showSelectColumn = false,
  showPagination = false,
  showOverflowTooltip = true,
  dataRoot = "users",
  propList,
  requestApi,
  queryForm,
  selectableId,
  selectableFilter = [],
  showOrHiddenHead = true,
  isPagination = true,
} = defineProps<Props>();

const emits = defineEmits<{
  getApiData: [_row: any];
}>();

const {
  tableData,
  pagination,
  total,
  loading,
  getTableData,
  handleSearch, //搜索
  refreshTableInfo, //刷新
} = useTable(requestApi, queryForm, dataRoot, isPagination);

// 回调表格的数据
watch(
  () => tableData.value,
  (oldNew) => {
    emits("getApiData", oldNew);
  }
);

// Function用来决定这一行的 CheckBox 是否可以勾选
const selectable = (row: any) => !selectableFilter.includes(row[selectableId]);

// 表格列展示筛选
const getPropList = (_row: ColumnOption[]) => {
  propListDate.value = _row;
};

// 加载列表数据
const refreshHandle = () => {
  handleSearch();
};

// 序号列
const serialColumn = ref<boolean>(true);
const handleSerialColumnChanges = (val: boolean) => {
  serialColumn.value = val;
};

// 勾选列
const tickColumn = ref<boolean>(true);
const handleTickChanges = (val: boolean) => {
  tickColumn.value = val;
};

// Table的尺寸
const tableSizes = ref<SizeTable>("");
const handleSizeTableChange = (val: SizeTable) => {
  tableSizes.value = val;
};

// 纵向边框
const verticalBorders = ref<boolean>(false);
const handleVerticalBorderChanges = (val: boolean) => {
  verticalBorders.value = val;
};

// 对应列是否可以排序
const sortableCustom = ref<boolean>(false);
const handleSortableCustomChanges = (val: boolean) => {
  sortableCustom.value = val;
};
// ref实例
const tableRef = ref<any>();
defineExpose({
  tableData,
  handleSearch,
  refreshTableInfo,
  tableRef,
});
</script>
<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-success-light-7);
}
</style>
